---
title: Input
description: Displays a form input field or a component that looks like an input field.
---

import { CommandTabs } from "@docs/components/command-tabs";
import { ExternalLinks } from "@docs/components/external-links";
import { PreviewCard } from "@docs/components/preview-card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@docs/components/ui/tabs";
import { InputPreview } from "@docs/components/examples";
import { Step, Steps } from 'fumadocs-ui/components/steps';

<div className="h-5"/>

<Tabs defaultValue="preview">
  <TabsList>
    <TabsTrigger value="preview">Preview</TabsTrigger>
    <TabsTrigger value="code">Code</TabsTrigger>
  </TabsList>
  <TabsContent value="preview">
    <div id="preview" className='*:hidden scroll-m-20' aria-hidden>
      ## Preview
    </div>
    <PreviewCard
      preview={
        <div className='w-full max-w-80'>
          <InputPreview />
        </div>
      }
    />
  </TabsContent>
  <TabsContent value="code">
    ```json doc-gen:file
    {
      "file": "./node_modules/@rnr/registry/src/examples/input.tsx",
      "codeblock": {
        "lang": "tsx"
      }
    }
    ```
  </TabsContent>
</Tabs>


## Installation

<Tabs defaultValue="cli">
  <TabsList>
    <TabsTrigger id="cli" value="cli">CLI</TabsTrigger>
    <TabsTrigger id="manual" value="manual">Manual</TabsTrigger>
  </TabsList>
  <TabsContent value="cli">
    <CommandTabs args={["add", "input"]}/>
  </TabsContent>
  <TabsContent value="manual">
    <Steps>
      <Step>
 
        **Copy and paste the following code into your project.**

        ```json doc-gen:file
        {
          "file": "./node_modules/@rnr/registry/src/new-york/components/ui/input.tsx",
          "codeblock": {
            "lang": "tsx",
            "meta": "title=\"@/components/ui/input.tsx\""
          }
        }
        ```

      </Step>
      <Step>

        **Update the import paths to match your project setup.**

      </Step>
    </Steps>
  </TabsContent>
</Tabs>

### Usage

```tsx
import { Input } from "@/components/ui/input"
```

```tsx
<Input />
```
